<template>
    <div class="scroll-container">
        <div 
            class="scroll-item" 
            v-for="(item, index) in scrollInfo.list"
            :style="{ height:`${ 100 / scrollNum}%` }"
        >
            <slot name="item" :index="scrollInfo.current * scrollNum + index" :item="item" ></slot>
        </div>
    </div>
</template>

<script setup>
    import { ref, watch, onMounted, onUnmounted } from 'vue';
    const props = defineProps({
        data:{ type:Array },
        scrollNum:{ type:Number, default:5 }
    });
    const scrollInfo = ref({ list:[], current:0 });
    const timer = ref();
    
    watch(()=>props.data, ()=>{
        if ( props.data.length <= props.scrollNum ) {
            scrollInfo.value = { list:props.data, current:0 };
        } else {
            let temp = Math.floor((props.data.length) / props.scrollNum );
            let count = props.data.length % props.scrollNum === 0 ? temp : temp + 1;
            scrollInfo.value = { list:props.data.slice(0, props.scrollNum), current:0 };
            timer.value = setInterval(()=>{
                let current = scrollInfo.value.current;
                if ( current + 1 === count ){
                    current = -1;
                }
                ++current;
                let startIndex = current * props.scrollNum ;
                let tempArr = props.data.slice(startIndex, startIndex + props.scrollNum );
              
                scrollInfo.value = { list:tempArr, current };
            }, 5000)
        }
    })
    onUnmounted(()=>{
        window.clearInterval(timer.value);
    })
</script>

<style scoped lang="scss">
    .scroll-container {
        height:100%;
        .scroll-item {
        }
    }
</style>